<!-- 我的伙伴页面，第三个tarbar -->
<template>
	<view class="all body">
		<!--顶部内容-->
		<view class="top-content">
			<view class="search-bar">

				<uni-section title="基本用法" type="line">
					<uni-search-bar @confirm="search" v-model="searchValue" class="search" cancelButton="none"
						@blur="blur" @focus="focus" @input="input" @cancel="cancel" @clear="clear">
					</uni-search-bar>

				</uni-section>



			</view>

			<uni-icons @hide-dropdown="hideDropdown" @click="CShowNavitor==!CShowNavitor" type="plus" :size="30"
				class="add-person-button"></uni-icons>


		</view>

		<div ref="dropdownCtn">
			<navigator-bar class="navigator-bar" :ShowNavitor='CShowNavitor' @click.stop></navigator-bar>
		</div>

		<!--上方功能区start-->
		<view class="message-top">
			<image class="search-partner" :src="src1"></image>
			<view class="msg-right-all">
				<image class="right-top" src="../../static/ling.png" @click="goToTheRing"></image>
				<image class="right-btm" src="../../static/teacher.png" @click="goToMyFriendsList"></image>
			</view>
		</view>
		<!--上方功能区end-->


		<!-- 下方添加好友区文字start -->
		<view class="friendAddMsg">
			<uni-icons type="mail-open" size="30"></uni-icons>

			最新消息列表<text>({{friendsAddList.length}})</text>
			
		</view>
		
		<!-- 下方添加好友区end -->
		<view class="ChatMsgCtn">
			<view class="PersonItem" v-for="(item,index) in friendsAddList">
				<view class="PersonItemPic">
					<!-- 用户头像 -->
					<image src="../../static/user.png" v-if="item.user.avatarurl==''" class="PerPic"></image>
					<image v-else :src="item.user.avatarurl" class="PerPic"></image>
				</view>
				<view class="PersonItemName">
					<!-- 用户昵称、备注 -->
					{{item.user.nickname}}---请求添加为好友
				</view>
				<view class="SendAddMsg">
					<!-- 点击发送消息，进入聊天框 -->
					<view class="chakanBtn" @click="AddWithSb(item.user.id,item.user.nickname)">查看</view>
					<view class="quxiaoBtn" @click="RejectWithSb(item.user.id,item.user.nickname)">拒绝</view>
				</view>
			</view>
		</view>
		<!-- 下方聊天区start -->
		<view class="ChatMsgCtn">
			<view class="PersonItem" v-for="(item,index) in friendsList" :key="index">
				<view class="PersonItemPic">
					<!-- 用户头像 -->
					<image :src="storeImg" v-if="item.user.avatarurl==''" class="PerPic"></image>
					<image v-else :src="item.user.avatarurl" class="PerPic"></image>
				</view>
				<view class="PersonItemName">
					<!-- 用户昵称、备注 -->
					{{item.user.nickname}}({{item.remark}})
				</view>
				<view class="SendMsg">
					<!-- 点击发送消息，进入聊天框 -->
					<uni-icons type="chatboxes" :size="40" @click="ChatWithSb(item.user.id)"></uni-icons>

				</view>
			</view>
		</view>
		<!-- 下方聊天区end -->
	</view>
</template>

<script>
	import NavigatorBar from 'pages/NavigatorBar/NavigatorBar.vue'
	import {
		partnerAdd, //修改好友备注或申请状态
		partnerList, //添加好友列表
	} from '@/config/api.js'


	export default {

		mounted() {


		},
		beforeDestroy() {

		},

		components: {
			'navigator-bar': NavigatorBar
		},

		onLaunch() {
			this.fetchAddFriendMsg()
		},
		onLoad() {
			this.fetchAddFriendMsg()
		},
		data() {
			return {
				searchValue: '',

				CShowNavitor: false,

				friendsAddList: {

				}, //请求添加你的好友的列表

				updateRemarkDTO: {
					frdId:0,
					remark:'',
					status:0
				}, //修改好友备注或申请状态 参数
				src1:'https://sprtlias.oss-cn-hangzhou.aliyuncs.com/5c73d958-3645-4dd6-8b54-ea277d46c300.jpg'
			}
		},
		methods: {
			
			//拒绝好友申请函数start
			async RejectWithSb(id, nickname){
				var that  = this
				
				that.updateRemarkDTO.remark = ''
				//初始化备注为空
				that.updateRemarkDTO.frdId = id
				try {
					that.updateRemarkDTO.status = -1
					let res = await partnerAdd(that.updateRemarkDTO)
					console.log("addFriend()=>" + res)
					// uni.showToast({
					// 	title: '添加好友成功',
					// 	duration: 2000
					// });
				} catch (err) {
					console.log("a用户拒绝添加好友->" + err)
					// uni.showToast({
					// 	title: '添加好友失败',
					// 	duration: 2000
					// });
				
				}
				that.fetchAddFriendMsg()
			},
			//添加好友详情函数
			async AddWithSb(id, nickname) {
				console.log('id ===>' + id)
				var that = this
				that.updateRemarkDTO.remark = ''
				//初始化备注为空
				that.updateRemarkDTO.frdId = id

				console.log("that.updateRemarkDTO.friId==>"+that.updateRemarkDTO.frdId)
				//TODO 1 :::::
				uni.showModal({
					
					title: '是否添加为好友，输入备注',
					content: '',
					editable: true,
					
					// title:that.friendsAddList.comment,
					// placeholderText:'输入备注'+that.friendsAddList.comment,
					// content:that.friendsAddList.comment,
					confirmText: '同意',
					cancelText:'取消',
					showCancel:true,
					success: async function(res) {
						if (res.confirm) {
							// console.log('输入的文本内容：', res.content);
							console.log('用户点击同意');
							// var formdata = {}
							// formdata.comment = res.content,
							// formdata.id = friendId
							that.updateRemarkDTO.remark = res.content //修改备注为玩家写入的东西
							console.log("that.updateRemarkDTO.remark"+that.updateRemarkDTO.remark)
							try {
								that.updateRemarkDTO.status = 1
								let res = await partnerAdd(that.updateRemarkDTO)
								console.log("addFriend()=>" + res)
								uni.showToast({
									title: '添加好友成功',
									duration: 2000
								});
							} catch (err) {
								console.log("a用户取消添加好友->" + err)
								// uni.showToast({
								// 	title: '添加好友失败',
								// 	duration: 2000
								// });

							}
							

						} else if (res.cancel) {

							console.log('用户点击取消');
						}
					}
					
					
				})
				
				that.fetchAddFriendMsg()
				////重新渲染请求获取请求添加的好友列表
				
			},
			//抓取请求获取请求添加的好友列表
			async fetchAddFriendMsg() {
				var that = this
				try {
					const res = await partnerList(0)
					this.$set(this, 'friendsAddList', res);
					console.log(that.friendsAddList + JSON.stringify(that.friendsAddList))


				} catch (e) {
					//TODO handle the exception
				}
			},
			//抓取请求获取好友聊天列表
			fetchFriendChatMsg() {

			},

			//跳转到小铃铛对应的页面
			goToTheRing() {
				uni.navigateTo({
					url: '/pages/toastWebsocket/toastWebsocket'
				})
			},
			// 好友列表页面start
			goToMyFriendsList() {
				uni.navigateTo({
					url: '/pages/friendsLists/friendsLists'
				})
			},
			// 好友列表页面end
			handleClickOutside(e) {
				// this.ShowNavitor = false
				if (!this.$refs.dropdownCtn.contains(e.target)) {
					this.hideDropdown()
				}
			},
			hideDropdown() {
				this.CShowNavitor = false;
			},
			changeShowModal() {
				if (this.CShowNavitor) {
					this.CShowNavitor = false
				} else {
					this.CShowNavitor = true
				}

				//改变 下拉框的展示 与否
			},
			updateShowModal() {
				this.CShowNavitor = !this.CShowNavitor

			},
			search(res) {

			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {

			},
			blur(res) {

			},
			focus(e) {

			},
			cancel(res) {

			}
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		}
	}
</script>

<style scoped lang="scss">
	.friendAddMsg{
		font-size: 1.3rem;
		margin-left: 20rpx;
		padding: 10rpx;
		font-weight: 400;
		text{
			font-weight:200;
			font-size: 0.9rem;
		}
	}
	.SendAddMsg{
		display: flex;
		flex-direction: row;
		flex: 1;
	}
	.quxiaoBtn{
		background-color: rgb(189, 206, 210);
		color: white;
		margin-right: 20rpx;
		
		line-height: 60rpx;
		height: 60rpx;
		width: 100rpx;
		text-align: center;
		/* font-weight: bold; */
		box-shadow: 3rpx 3rpx 3rpx 3rpx black inset;
		
		border-radius: 10rpx;
	}
	.chakanBtn {
		background-color: rgb(38, 138, 210);
		color: white;
		margin-right: 20rpx;

		line-height: 60rpx;
		height: 60rpx;
		width: 100rpx;
		text-align: center;
		/* font-weight: bold; */
		box-shadow: 3rpx 3rpx 3rpx 3rpx black ;
		
		border-radius: 10rpx;
	}

	.PerPic {
		width: 100%;
		height: 80%;
		margin-left: 10rpx;
		margin-top: 10rpx;
		border-radius: 50%;
	}

	.SendMsg {
		flex: 1;
		align-items: center;
		justify-content: center;
		display: flex;
		
		
	}

	.PersonItemName {
		flex: 4;
		padding-left: 20rpx;
	}

	.PersonItemPic {
		flex: 1;
		height: 85%;
		border-radius: 50%;


	}

	.PersonItem {
		margin-top: 5rpx;
		width: 95%;
		height: 140rpx;
		margin: auto;
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
		border-radius: 5%;

		background-color: white;
	}
	
	.ChatMsgCtn {
		flex: 3;
		margin-top: 25rpx;

		

	}

	.navigator-bar {
		position: absolute;
		right: 10rpx;
		top: 30rpx;
		z-index: 1;
		
	}

	.body {
		background-color: #F5F5F5;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;


	}

	.right-top:active {
		transform: rotate(10deg);
	}

	.right-top {
		margin: auto;
		box-sizing: border-box;
		width: 80%;
		height: 50%;
		scale: 0.7;
	}

	.right-btm:active {
		transform: rotate(10deg);
	}

	.right-btm {
		margin: auto;
		box-sizing: border-box;
		width: 80%;
		height: 50%;
		scale: 0.7;
	}

	.msg-right-all {
		flex: 1;
		width: 40%;
		height: 90%;
		margin: auto;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.all {
		width: 100%;
	}

	.search-partner:active {
		scale: 1.007;
	}

	.search-partner {
		height: 90%;
		width: 90%;
		flex: 3;
		background-color: aquamarine;
		margin: auto;
		box-sizing: border-box;
		border-radius: 8%;
	}

	.search-partner img {
		object-fit: cover;
		background-color: aqua;
		overflow: hidden;

	}

	.message-top {
		display: flex;
		flex-direction: row;
		width: 90%;
		margin: auto;
		box-sizing: border-box;
		height: 300rpx;
		background-color: #F5F5F5;
		border-radius: 5%;
	}



	.search {
		border-radius: 5%;
	}

	.uni-search-bar {
		border-radius: 10%;
	}

	.top-content {
		display: flex;
		justify-content: space-between;
		background-color: #f8f8f8;
		width: 100%;
		margin: auto;
		box-sizing: border-box;
		border: #f8f8f8 solid 2rpx;
	}

	.search-bar {
		margin-top: -22rpx;
		width: 90%;

	}

	.add-person-button {
		margin-top: 8rpx;
		float: right;
	}


	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}
</style>